<template>
  <div class="app-container dashboard-container">
    <!-- 总数据统计卡片 -->
    <el-row :gutter="20" class="summary-row">
      <el-col :xs="12" :sm="12" :md="6" v-for="item in summaryList" :key="item.label">
        <el-card shadow="hover" class="summary-card">
          <div class="card-title" >{{ item.label }}</div>
          <div class="card-value" :class="{ 'fail-value': item.label === '执行失败数' }"
>{{ item.value }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 调用次数折线图 -->
    <el-card class="chart-card" shadow="hover">
      <div class="chart-title">每日智能体调用次数（折线趋势）</div>
      <div ref="rankingChart" class="chart"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { getHomeData, getHomeRanking } from '../api/index' // 自定义接口文件

const summaryList = ref([
  { label: '总注册人数', value: 0 },
  { label: '总充值金额', value: 0 },
  { label: '总积分', value: 0 },
  { label: '执行失败数', value: 0 },
])

const rankingChart = ref(null)
let chartInstance = null

// 初始化页面数据
const initData = async () => {
  // 获取汇总数据
  const res1 = await getHomeData()
  if (res1.code === 200 || res1.code === 0) {
    const d = res1.data || {}
    summaryList.value = [
      { label: '总注册人数', value: d.sumRegister },
      { label: '总充值金额', value: d.totalIncome },
      { label: '总积分', value: d.totalScore },
      { label: '执行失败数', value: d.totalScoreAgentFail },
    ]
  }

  // 获取调用次数数据
  const res2 = await getHomeRanking()
  if (res2.code === 200 || res2.code === 0) {
    initChart(res2.data)
  }
}

// 初始化 ECharts 折线图
const initChart = (data) => {
  if (!rankingChart.value) return
  chartInstance = echarts.init(rankingChart.value)

  const seriesData = (data.data || []).map((item) => ({
    name: item.name,
    type: 'line',
    smooth: true, // 平滑曲线
    symbol: 'circle',
    symbolSize: 6,
    lineStyle: { width: 2 },
    data: item.data,
  }))

  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50,50,50,0.8)',
      textStyle: { color: '#fff' },
      borderWidth: 0,
    },
    legend: {
      top: '5%',
      textStyle: { color: '#666' },
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: data.xaxis || [],
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#666' },
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#eee' } },
      axisLabel: { color: '#666' },
    },
    series: seriesData,
  }

  chartInstance.setOption(option)
}

const resizeChart = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  initData()
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped>
.dashboard-container {
  background: #f5f7fa;
  padding: 20px;
}

.summary-row {
  margin-bottom: 20px;
}

.summary-card {
  text-align: center;
  border-radius: 12px;
  font-size: 16px;
}

.card-title {
  color: #888;
  margin-bottom: 8px;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
  color: #409EFF;
}

.chart-card {
  border-radius: 12px;
  padding: 10px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.chart {
  width: 100%;
  height: 400px;
}

.fail-value {
  color: #ff4d4f; /* Element Plus 的错误红 */
}
</style>
